<template>
  <div>
    <div class="runk_body">
            <h5 class="runk_title">近三个月赞助厂商榜单</h5>
            <div class="runk_list" v-for="(item,index) in runkData" :key="item.webinar_company_name" @click="goinfo(item)">
              <img v-if="index<3"  :src="require('../../../assets/img/top'+Number(index+1)+'.png')" class="runk_img" alt="">
              <span class="runk_img runk_pm" v-else>{{ index+1 }}</span>
              <img class="runk_logo" :src="item.webinar_company_logo" alt="">
              <span class="runk_content">{{item.webinar_company_name}}</span>
            </div>
          </div>
  </div>
</template>

<script>
import api from "@/api";
export default {
data(){
    return{
        runkData:[],
    }
},
mounted(){
    this.getTopSponsor()
},
methods:{
    getTopSponsor(){
        api.home.getTopSponsor().then(res=>{
            this.runkData=res.data
        })
    },
    goinfo(item){
      window.open(`https://www.instrument.com.cn/webinar/organ/detail_${item.IMSHOWID}.html`)
    }
}
}
</script>

<style lang="scss" scoped>
.runk_body{
  background: #fff;
  padding: 18px 16px;
  margin-top: 16px;
}
.runk_title{
  padding: 13px;
  background: url('../../../assets/img/bj_paihangbang.png') no-repeat;
  background-size: 100%;
font-size: 14px;
font-weight: 600;
color: #844E1A;
margin-bottom: 18px;
line-height: 14px;
}
.runk_list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  cursor: pointer;
}
.runk_list:last-child{
  margin-bottom: 0px;
}
.runk_img{
  width: 27px;
  display: inline-block;
  margin-left: 8px;
}
.runk_pm{
    text-align: center;
font-size: 16px;
font-weight: 600;
color: #B9C0C7;
}
.runk_logo{
  display: inline-block;
  margin: 0 15px 0 25px;
  width: 60px;
  height: 28px;
  object-fit: contain;
  padding: 3px 1px;
  border: 1px solid #E5EAF0;
}
.runk_content{
font-size: 13px;
color: #4F5862;
line-height: 20px;
width: 9.74vw;
}
.runk_content:hover{
  color: #0c7ff2;
}
</style>